<script setup>
import { ref } from 'vue';
import Walk from './sjcx/Walk.vue';
import Weight from './sjcx/Weight.vue';
import Sleep from './sjcx/Sleep.vue';
import healthRate from "./sjcx/HealthRate.vue";
import bloodPress from "./sjcx/BloodPressure.vue";
import bloodSugar from "./sjcx/BloodSugar.vue";
import temperature from "./sjcx/Temperature.vue";
import exercises from "./sjcx/ExerciseData.vue";

// 选项卡配置
const tabs = [
  { label: '走步', value: 'walk' },
  { label: "体重", value: 'weight' },
  { label: "睡眠", value: 'sleep' },
  { label: "心率", value: 'healthRate' },
  { label: "血压", value: 'bloodPress' },
  { label: "血糖", value: 'bloodSugar' },
  { label: "体温", value: 'temperature' },
  { label: "运动", value: 'exercises' },
];
// 默认激活的选项卡值
const activeTab = ref('walk');
const components = {
  walk: Walk,
  weight: Weight,
  sleep: Sleep,
  healthRate: healthRate,
  bloodPress: bloodPress,
  bloodSugar: bloodSugar,
  temperature: temperature,
  exercises: exercises
};
const handleTabClick = (tab) => {
  // alert("这是切换组件" + tab.paneName);
  activeTab.value = tab.paneName;
  // alert(activeTab.value);
  console.log('切换到:', tab.props.label, '值:', tab.paneName);
};
</script>

<template>
  <div class="health-data-query">
    <h2>数据查询</h2>
    <el-tabs v-model="activeTab" type="card" @tab-click="handleTabClick">
      <el-tab-pane
          v-for="tab in tabs"
          :key="tab.value"
          :label="tab.label"
          :name="tab.value"
      >
        <component :is="components[activeTab]" />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<style scoped>
.health-data-query {
  padding: 20px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}
</style>